<template>
	<div class="tab-chart">
		<div class="tab-chart__header">
			<div class="card__header">
				<span class="label">近30天活跃趋势</span>
			</div>
			<!--  @change="refresh()" -->
		</div>
		<div style="padding: 0 20px 20px">
			<el-radio-group v-model="tabs.day" border>
				<el-radio-button :label="7" :value="7">活跃用户</el-radio-button>
				<el-radio-button :label="15" :value="15">注册用户</el-radio-button>
				<el-radio-button :label="30" :value="30">累计注册用户</el-radio-button>
			</el-radio-group>
		</div>
		<div class="tab-chart__container">
			<v-chart :option="chartOption" autoresize />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useCool } from '/@/cool';

const { service } = useCool();

const tabs = reactive({
	active: 'user',
	day: 7,
	list: [
		{
			label: '用户数',
			value: 'user'
		},
		{
			label: '销售额',
			value: 'amount'
		},
		{
			label: '订单数',
			value: 'count'
		}
	],
	select(value: string) {
		tabs.active = value;
		refresh();
	}
});

// const chartOption = reactive({
// 	grid: {
// 		left: '10%',
// 		top: 0,
// 		right: '10%',
// 		bottom: 0
// 	},
// 	xAxis: {
// 		type: 'category',
// 		data: ['00:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00'],
// 		boundaryGap: false
// 	},
// 	yAxis: {
// 		type: 'value',
// 		splitLine: {
// 			show: false
// 		},
// 		axisTick: {
// 			show: false
// 		},
// 		axisLine: {
// 			show: false
// 		},
// 		axisLabel: {
// 			show: false
// 		}
// 	},
// 	series: [
// 		{
// 			barWidth: 18,
// 			name: '付款笔数',
// 			type: 'bar',
// 			data: new Array(8).fill(1).map(() => Math.random() * 50 + 20),
// 			itemStyle: {
// 				color: '#4165d7'
// 			}
// 		},
// 		{
// 			type: 'bar',
// 			barWidth: 18,
// 			xAxisIndex: 0,
// 			barGap: '-100%',
// 			data: [100, 100, 100, 100, 100, 100, 100, 100],
// 			itemStyle: {
// 				color: '#f1f1f9'
// 			},
// 			zlevel: -1
// 		}
// 	]
// });

function refresh() {
	const req: Promise<{ datas: number[]; dates: string[] }> =
		service.user.analysis.getActiveTrends({
			type: 1
		});
	req.then(res => {
		let max = Math.max(...res.datas);
		if (max < 10) {
			max = 10;
		}
		// 数据
		// chartOption.series[0].data = res.datas;
		// // 日期
		// chartOption.xAxis.data = res.dates.map((e: string) => {
		// 	const [_, b, c] = e.split('-');
		// 	return `${b}-${c}`;
		// });
	});
}

onMounted(() => {
	refresh();
});
</script>

<style lang="scss" scoped>
.tab-chart {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 20px 0 0;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: #000;
					font-weight: bold;
				}
			}
		}
	}

	&__container {
		height: 500px;
		padding: 0 15px;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}
</style>
